<template>
  <div class="netMonitor">
    <ul>
      <a-tooltip placement="left">
        <template slot="title">
          <div class="tc" style="padding: 6px">
            <p>
              <img src="../../../public/img/qrCode.png" alt="" />
            </p>
            <div>扫码下载聚点APP</div>
          </div>
        </template>
        <li class="cursor-pointer">
          <c-icon type="erweima"></c-icon>
        </li>
      </a-tooltip>
      <a-tooltip placement="left" overlayClassName="netMonitor-weChat">
        <template slot="title">
          <div class="tc" style="padding: 6px">
            <p class="weChat">
              <img src="/img/service1.png" alt="" />
              <img src="/img/service2.png" alt="" />
            </p>
            打开微信扫一扫，添加客服微信
          </div>
        </template>
        <li class="cursor-pointer">
          <!-- <a
            target="_blank"
            href="http://wpa.qq.com/msgrd?v=3&uin=3227801570&site=qq&menu=yes"
          > -->
          <c-icon type="weixin1"></c-icon>
          <!-- </a> -->
        </li>
      </a-tooltip>
      <a-tooltip placement="left">
        <template slot="title">
          新手指引
        </template>
        <li class="cursor-pointer">
          <router-link to="/guide">
            <c-icon type="zhinanzhen"></c-icon>
          </router-link>
        </li>
      </a-tooltip>
      <a-tooltip placement="left">
        <template slot="title">
          返回顶部
        </template>
        <li
          class="cursor-pointer"
          :class="[showTop ? 'toTop' : '']"
          @click="toTop"
        >
          <c-icon type="zhiding"></c-icon>
        </li>
      </a-tooltip>
    </ul>
  </div>
</template>

<script>
import { debounce } from "@/util/common";

export default {
  data() {
    return {
      showTop: false
    };
  },
  methods: {
    // 返回顶部
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    // 根据页面滚动距离，判断是否显示置顶按钮
    topVisible: debounce(function() {
      if (document.documentElement.scrollTop >= 150) {
        this.showTop = true;
      } else {
        this.showTop = false;
      }
    }),
    // 监听页面滚动
    init() {
      window.addEventListener("scroll", this.topVisible);
    }
  },
  created() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
.netMonitor {
  z-index: 999;
  position: fixed;
  right: 2px;
  top: 60%;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  li {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    // border-bottom: 1px solid #d9d9d9;
    .iconfont {
      display: inline-block;
      margin: 0;
      color: var(--primary);
    }
    .weChat {
      img {
        width: 100px;
      }
    }
  }
  li:last-child {
    // border-bottom: 0;
    height: 0;
    transition: height 0.4s;
  }
  li:hover {
    .iconfont {
      color: var(--primary);
      -webkit-animation: shake 0.25s;
    }
  }
  li.toTop {
    height: 40px;
  }
  //   抖动动画
  @-webkit-keyframes shake {
    0%,
    10%,
    55%,
    90%,
    94%,
    98%,
    100% {
      -webkit-transform: scale(1, 1);
    }
    30% {
      -webkit-transform: scale(1.14, 0.86);
    }
    75% {
      -webkit-transform: scale(0.92, 1.08);
    }
    92% {
      -webkit-transform: scale(1.04, 0.96);
    }
    96% {
      -webkit-transform: scale(1.02, 0.98);
    }
    99% {
      -webkit-transform: scale(1.01, 0.99);
    }
  }
}
</style>
